<script setup name="">
import { listExcel, getMeetingName } from '@/api/commission/rebateZQ'
const { proxy } = getCurrentInstance()
const userList = ref([])
const loading = ref(true)
const showSearch = ref(true)
const dateRange = ref([])
const data = reactive({
  queryParams: {
    meetingName: '',
    packageName: undefined
  }
})
const { queryParams } = toRefs(data)

// #region 查询所有的台账名称
const TeamList = ref([])
function getMeeting () {
  getMeetingName().then(response => {
    TeamList.value = response.data
    queryParams.value.meetingName = response.data[0]
    console.log(TeamList.value, 888)
    getList()
  })
}
getMeeting()
// #endregion

// #region 查询列表

function getList () {
  loading.value = true
  listExcel(proxy.addDateRange(queryParams.value)).then(res => {
    loading.value = false
    userList.value = res.data
  })
}
/** 搜索按钮操作 */
function handleQuery () {
  getList()
}
/** 重置按钮操作 */
function resetQuery () {
  dateRange.value = []
  proxy.resetForm('queryRef')
  queryParams.value.meetingName = TeamList.value[0]
  queryParams.value.packageName = undefined
  // proxy.$refs.deptTreeRef.setCurrentKey(null);
  handleQuery()
}
// #endregion

// #region 如果是预估那么就更改样式
const tableRowClassName = ({ row, rowIndex }) => {
  console.log(row.type, 666)
  if (row.type === '预估') {
    return 'warning-row'
  }
  return ''
}
</script>

<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="台账名称" prop="meetingName">
        <el-select v-model="queryParams.meetingName" clearable filterable>
          <el-option v-for="item in TeamList" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"f
          v-hasPermi="['']"
          >导出</el-button
        >w
      </el-col> -->
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="userList"
      show-summary
      :row-class-name="tableRowClassName"
      max-height="650"
      border
    >
      <el-table-column
        label="分类"
        align="center"
        prop="type"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="账期"
        align="center"
        prop="expense"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="单量"
        align="center"
        prop="count"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="在网率"
        align="center"
        prop="onlineRate"
        :show-overflow-tooltip="true"
        width="100"
      />
      <el-table-column
        label="预结"
        align="center"
        prop="preSettlement"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="结算金额"
        align="center"
        prop="settlementAmount"
        :show-overflow-tooltip="true"
      />

      <el-table-column
        label="单价"
        align="center"
        prop="price"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="店铺预结"
        align="center"
        prop="deptPreSettlement"
        width="100"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="店铺结算金额"
        align="center"
        prop="deptSettlementAmount"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="店铺单价"
        align="center"
        prop="deptPrice"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="话费预估"
        align="center"
        prop="estimatedPhoneBill"
        width="100"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="扣罚"
        align="center"
        prop="fine"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="预估可结佣金"
        align="center"
        prop="estimatedCommissionPayable"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="店铺预估可结佣金"
        align="center"
        prop="deptEstimatedCommissionPayable"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="盈利"
        align="center"
        prop="profit"
        :show-overflow-tooltip="true"
      />
    </el-table>
  </div>
</template>
<style lang="scss">
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
